<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>js event</title>
    <style type="text/css">
        .container{
            background-color: rgb(179, 255, 0);
            width: 100%;
            height: 100%;
        }
        .p-div{
            background-color:darkgray;
            background:rgba(0, 0, 0, 0.5);
            opacity:0.3;
            position: fixed;
            margin: 10px;

        }
        .sub-div{
            opacity:1;
            background-color:red;
            position:relative;
            margin-top:5px;
        }
    </style>
    <script type="text/javascript">
        window.onload = function(){
            var parent = document.getElementById("parent");
            //true代表事件类型为捕获，false代表事件类型为冒泡，false为事件默认方式
            parent.addEventListener("click",function(event){
                //console.log("parent click1 ＝ "+event.target);
                //鼠标单击的对象
                console.log("parent click1 target ＝ "+event.target.tagName);
                //事件注册的对象
                console.log("parent click1 current target ＝ "+event.currentTarget.tagName);
            },true);
            //addEventListener可以多次注册同一事件
            // parent.addEventListener("click",function(event){
            //     console.log("parent click2");
            // },true);

            var son = document.getElementById("son");
            son.addEventListener("click",function(event){
                //console.log("son click ＝ "+event.screenX);
                console.log("son click ＝ "+event.eventPhase);
                //event.stopPropagation();//阻止事件冒泡，不能阻止事件捕获
                //event.preventDefault();
            },true);
        }
        
    </script>
  </head>
  <body>
    
    <div class="container">
        <h1>Bootstrop</h1>
        <div class="p-div" id="parent">
            <h4>父级div</h4>
            <div class="sub-div" id="son">
                <span>子级DIV</span>
            </div>
        </div>
    </div>
  </body>

</html>
